<template>
  <view class="withdrawal">
    <!-- <uni-nav-bar dark  :fixed="true"     left-icon="left" :left-text="true" title="当前积分" @clickLeft="back" /> -->
    <intake-nav-bar title="当前积分1" dark :fixed="true" color="#fff"/>
    <view>
    <view class="d_score border-r20">
      <view class="guarantee flexs flex-c flexs-ver w-100">
        <img :src="anPic" alt="">
        <text>积分安全有保障</text>
      </view>
      <view class="score_sc ac h305">
        <view class="score_cut fs33 padding40">当前积分</view>
        <view class="score_sum fs40 ">{{user_integral}}</view>
      </view>
      <view class="score_but ">
        <view class="score_rec">
          <view class=" score_recharge border-r40 ">充值</view>
          <view class=" score_withdrawal border-r40 " >提现</view>
        </view>
      </view>
    </view>
    <view class="log">
      <view style="width: 720rpx;margin: auto;margin-top: 24rpx;display: flex;flex-direction: column;">
        <view @click="getScoreList(t)"   v-for="t in score_list" style="width: 720rpx;display: flex;align-items: flex-start;padding: 16rpx;background: #fff;margin-top: 3rpx;">
          <view style="width: 100rpx;height: 100rpx;">
            <image :src="t.type == 1 ? czPic : txPic" style="border-radius: 8rpx;width: 100rpx;height: 100rpx;" mode=""></image>
          </view>
          <view style="margin-left: 16rpx; width: 580rpx;display: flex;background: white;justify-content: space-between;">
            <view style="height: 116rpx;display: flex;flex-direction: column;justify-content: space-between;">
              <view style="color: #222234;font-size: 25rpx;font-weight: 430;width: 400rpx;" class="u-line-2">
                <text style="color: #366092;">{{t.title}}</text>
              </view>
              <view style="color: #FA3534;font-weight: 450;">
                <text style="font-size: 32rpx;">{{t.date}}</text>
              </view>
            </view>
            <view style="width: 130rpx; height: 100rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;">
              <view style="">
                <view name="hourglass-half-fill"  >{{t.price/100}}</view>
              </view>
              <view style="">
                <view   text="领取" mode="dark">{{t.price_s}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import {
  mapGetters,
  mapMutations
} from 'vuex';
import selectBank from '@/components/selectBank.vue';
import {userScoreTake,getScoreLists,userScoreUsable,getBankList} from '@/api/user/userScore'
import {getUserInfo} from "@/api/user";
export default {
  data() {
    return {
      userBankList: [],
      anPic:'',
      czPic: this.$common.imgUrl() + '/images/score/cz@2x.png',
      txPic: this.$common.imgUrl() + '/images/score/tx@2x.png',

      score_sum: 0,
      price: '',
      loadingType: '', //加载更多status
      page: 1,
      user_integral: 0,
      userInfo: {},
      staticImage: {
        turn: this.$common.imgUrl() + '/img/home/turn@2x.png',
        backIconF: this.$common.imgUrl() + '/img/back-f.png',
        backImg: this.$common.imgUrl() + '/img/home/04@2x.png',
      },
      score_list:[
        {
          type:1,
          title:"提现",
          date:'2025-01-02 11:15:35',
          price:1584,
          price_s:546,
        },
        {
          type:2,
          title:"积分增加",
          date:'2025-01-02 11:15:35',
          price:1584,
          price_s:546,
        },
        {
          type:1,
          title:"提现",
          date:'2025-01-02 11:15:35',
          price:1584,
          price_s:546,
        },
        {
          type:2,
          title:"积分增加",
          date:'2025-01-02 11:15:35',
          price:1584,
          price_s:546,
        },
        {
          type:2,
          title:"积分增加",
          date:'2025-01-02 11:15:35',
          price:1584,
          price_s:546,
        },
        {
          type:2,
          title:"积分增加",
          date:'2025-01-02 11:15:35',
          price:1584,
          price_s:546,
        },
        {
          type:2,
          title:"积分增加",
          date:'2025-01-02 11:15:35',
          price:1584,
          price_s:546,
        },
      ]

    }
  },
  computed: {
    ...mapGetters(['userSelectBankInfo']),
  },
  components: {
    uniLoadMore,
    selectBank
  },
  mounted() {
  },
  onLoad(query) {
  },
  async onShow() {
    await this.getUserInfo();
    await this.getUserScoreUsable();
    await this.getScoreList();
    await this.getBankLists()
  },
  watch: {
    // price(newValue, oldValue) {
    // 	if(newValue > this.placeholderPrice){
    // 		console.log(newValue,this.placeholderPrice);
    // 		this.$set(this,'price',this.placeholderPrice)
    // 	}
    // }
  },
  methods: {
    // 银行卡列表
    getBankLists(){
      console.log('银行卡-------------')
      getBankList().then(res => {
        console.log('=========',res)
      })
    },
    getScoreList(){
      // getScoreLists().then(res=>{
      //   this.score_list = res.data
      // })
    },
    getUserInfo(){
      let that = this;
      getUserInfo().then(res => {
        that.$set(that, 'userInfo', res.data);
        that.user_integral = res.data.integral??0
      })
    },
    back() {
      uni.navigateBack({
        delta: 1
      })
    },
    calculateHeights() {
      uni.getSystemInfo({
        success: (res) => {
          const windowHeight = res.windowHeight;
          // 假设头部高度固定为某个值，或者根据设计稿动态计算
          this.headerHeight = 50; // 示例值，实际应根据设计稿确定
          // 内容区域高度 = 屏幕高度 - 头部高度 - 其他必要的高度（如padding、margin等）
          this.contentHeight = windowHeight - this.headerHeight - 20; // 示例中的20为其他必要高度
        },
      });
    },
    validateAll() {
      if (this.$common._empty(this.userSelectBankInfo)) {
        this.$utils.showToast('请选择银行卡');
        return false;
      }

      if (this.price <= 0) {
        this.$utils.showToast('最小输入数量为1');
        return false;
      }
      return true;
    },


    async userTake() {
      let isValid = this.validateAll();
      if (!isValid) return;
      userScoreTake({
        id: this.userSelectBankInfo.id,
        score: this.price
      }).then(res => {

      })

      this.$common.navTo('/pages/user_bank/operatSuccess?type=2');
    },
    ...mapMutations(['setBankInfo']),
    selectEvent(data) {
      this.setBankInfo(data);
    },
    async getUserBankList() {
      userBankList().then(res => {

        if (!this.$common._empty(this.userSelectBankInfo)) {
          res.data.forEach(i => {
            if (i.id == this.userSelectBankInfo.bank_info.id) {
              i.default = true;
            }
          })
        }
        this.userBankList = res.data;
      })
    },
    async getUserScoreUsable() {
      userScoreUsable().then(res => {
        this.placeholderPrice = res.data.score;
      })
    },
    openDialog() {
      // await this.getUserBankList();
      this.$refs.selectBank.open();
    },
    allClick() {
      this.price = this.placeholderPrice;
    },
    inputEvent(e) {
      if (e.detail.value > this.placeholderPrice) {

        // console.log(e.detail.value,this.placeholderPrice);

        this.$set(this, 'price', JSON.parse(JSON.stringify(this.placeholderPrice))).toFixed(2);
      }
    },
  }
}
</script>

<style lang="scss">
.withdrawal {
  width: 100%;
  height: 100vh;
  background: url($baseUrl + '/images/bg.png') no-repeat center / 100% 100%;
  .d_score{
    display: flex;
    flex-direction: column;
    align-items: center; /* 保证内部元素在水平方向上居中 */
    background-color: #fff;
    height: 496rpx;
    margin: 20rpx;
    .guarantee{
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px; /* 与下方的log列表保持一定间距 */

      background-color: #00cfff;
      color: #fff;
      text-align: center;
      height: 50rpx;
      img{
        height: 35rpx;
        width: 30rpx;
        padding-right: 5rpx;
      }
    }
    .score_sc{
      .score_cut{
        color: #49515f;
      }
      .score_sum{
        color: #212b3d;
      }
    }
    .score_but {
      display: flex;
      justify-content: center; /* 保证内部元素在水平方向上居中 */
      margin-top: 20px; /* 与上方的score_sc保持一定间距 */
      .score_rec {
        margin-bottom: 30rpx;
        display: flex;
        gap: 20px; /* 子元素之间的间距 */
       .score_recharge,
       .score_withdrawal {
        padding: 10px 20px;
        border: 1px solid #ddd; /* 边框样式，可根据实际情况调整 */
        text-align: center; /* 文字居中 */
         width: 308rpx;
         border: solid #e4e4e4 1rpx;
      }
        .score_recharge {
          color: #86909c;
          background-color: #fff;
        }
        .score_withdrawal{
          color: #fff;
          background-color: #0851fd;
        }
    }
    }
  }

  .section {
    padding: 0 30rpx 0;
    margin-top: 50rpx;

    .bank-icon {
      width: 30rpx;
      height: 30rpx;
    }

    .to-bank-list {
      width: 12rpx;
      height: 23rpx;
      transform: rotate(180deg);
    }

    .input-price-area {
      background-color: #fff;
      border-radius: 22rpx;
      padding: 20rpx 30rpx 50rpx;
    }
  }

  .smt-btn-area {
    width: 100%;
    position: absolute;
    bottom: 100rpx;

    .smt-btn {
      width: 100%;
      height: 98rpx;
      text-align: center;
      line-height: 98rpx;
      color: #fff;
      border-radius: 49rpx;
      background: linear-gradient(-90deg, #37A9FF, #6DFFFF);
    }
  }

}
</style>
